import React from 'react';
import {Modal, Form, DatePicker, Space, Button} from 'antd';
import ProForm, { ProFormText, ProFormSelect } from '@ant-design/pro-form';
import { useForm } from 'antd/es/form/Form';
import usefulLinksFormItems from './formItems/newLinksFormItems';
import { ADD_LINK } from './consts';
import newLinksFormItems from './formItems/newLinksFormItems';
import linksCategoryFormItems from './formItems/configLinksCategoryFormItems';
import { getLinkTypeList } from '@/services/linkManager';
import {CheckOutlined, UndoOutlined} from "@ant-design/icons";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;
export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
  key: number;
};

const AddLinksForm: React.FC<UpdateFormProps> = (props) => {
  const [form] = useForm();
  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };

  const onReset = () => {
    form.setFieldsValue({});
  };
  if (JSON.stringify(props.values) == '{}') {
    form.resetFields();
  }
  return (
    <Modal
      // title="编辑用户"
      title={JSON.stringify(props.values) != '{}' ? '编辑友情链接' : '添加友情链接'}
      width="600px"
      destroyOnClose
      open={props.updateModalVisible}
      onCancel={props.onCancel}
      footer={null}
    >
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        initialValues={props.values}
        onFinish={props.onSubmit}
        onReset={onReset}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />重置</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />提交</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '友情链接分类必填',
            },
          ]}
          width="md"
          label="友情链接分类"
          // width="60%"
          name="linkTypeId"
          initialValue={props.values.linkType}
          placeholder="请选择"
          request={async () => {
            // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
            // 如果需要转化参数可以在这里进行修改
            const msg = await getLinkTypeList();
            let res = [];
            msg.data.map((item) => {
              let temp = {};
              temp['label'] = item.name;
              temp['value'] = item.id;
              res.push(temp);
            });
            return res;
          }}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '网站名称必填',
            },
          ]}
          width="md"
          name="linkName"
          placeholder="请填写网站名称"
          label="网站名称"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '网站地址必填',
            },
          ]}
          width="md"
          name="linkAddress"
          placeholder="请填写网站地址"
          label="网站地址"
        />
      </ProForm>
    </Modal>
  );
};

export default AddLinksForm;
